<template>
  <div class="xd-put-in">
      <div class="list" v-show="isShow">
        <Card>
          <p slot="title">
            <Icon type="md-list" />
            洗涤入库列表
          </p>
          <Form ref="formInline" :model="formSearch"  inline>
              <FormItem prop="depaid" v-show="this.access!=='wash'">
                <Select class="select" v-model="formSearch.depaid" placeholder="请选择洗涤公司">
                  <Option v-for="item in washList" :value="item.depaid" :key="item.depaid">
                  {{ item.depaname }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem prop="name">
                <Input type="text" v-model="formSearch.name" placeholder="请输入医院名称关键字"></Input>
              </FormItem>
              <FormItem prop="user">
                <DatePicker type="date" placeholder="入库起始时间" style="width: 200px"  v-model="formSearch.startTime" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="user">
                <DatePicker type="date" placeholder="入库结束时间" style="width: 200px" v-model="formSearch.endTime" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
              </FormItem>
              <FormItem>
                  <Button type="primary" @click="handleSeacrh()">查询</Button>
              </FormItem>
          </Form>
          <Table highlight-row stripe :columns="columns" :data="data" ></Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
            </div>
          </div>
        </Card>
      </div>
      <div class="view" v-show="!isShow">
        <Card>
          <p slot="title">
            <Icon type="ios-paper" />
            查看详情
          </p>
          <p slot="extra" >
            <Button type="primary" @click="goBack()">返回</Button>
          </p>
          <div class="view-content">
            <Table highlight-row stripe :columns="columnsA" :data="dataA" ></Table>
          </div>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="pageA.total" :page-size="pageA.pageSize" :current="1" @on-change="changePageA" show-total></Page>
            </div>
          </div>
        </Card>
      </div>
  </div>
</template>

<script>
import i18n from "./locale";
import mixin from "../common/mixin";
import mixinDate from "@/mixin/date-mixin";
import mixinTag from "@/mixin/tag-mixin";

export default {
  name: "xd-put-in",
  components: {},
  mixins: [mixin, mixinDate, mixinTag],
  data() {
    return {
      i18n: i18n,
      access: "",
      isShow: true,
      startTimeOption: {},
      endTimeOption: {},
      washList: [],
      page: {
        total: 0,
        pageSize: 20
      },
      formSearch: {
        depaid: "",
        lx: 7,
        name: "",
        startTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 20
      },
      pageA: {
        total: 0,
        pageSize: 20
      },
      formSeachA: {
        billid: "",
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "单号",
          key: "billid",
          render: (h, params) => {
            const row = params.row;
            let tthis = this;
            return h(
              "div",
              {
                on: {
                  click: () => {
                    this.show(params.index);
                  }
                }
              },
              row.billid
            );
          }
        },
        {
          title: "医院",
          key: "hospitalname"
        },
        {
          title: "数量",
          key: "cnt"
        },
        {
          title: "总价",
          key: "totalprice"
        },
        {
          title: "入库人",
          key: "outmans"
        },
        {
          title: "入库时间",
          key: "outdate",
          render: (h, params) => {
            return h(
              "Tooltip",
              {
                class: {
                  "ivu-table-cell-tooltip": true
                }
              },
              [
                h(
                  "span",
                  {
                    class: {
                      "ivu-table-cell-tooltip-content": true
                    }
                  },
                  this.formatTime(params.row.outdate, true)
                ),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  this.formatTime(params.row.outdate, true)
                )
              ]
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看详情"
              )
            ]);
          }
        }
      ],
      data: [],
      columnsA: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "单号",
          key: "billid"
        },
        {
          title: "医院",
          key: "hospitalname"
        },
        {
          title: "类别",
          key: "categoryname"
        },
        {
          title: "单价(RMB)",
          key: "price"
        },
        {
          title: "数量",
          key: "cnt"
        },
        {
          title: "入库人",
          key: "outmans"
        },
        {
          title: "入库时间",
          key: "outdate",
          render: (h, params) => {
            return h(
              "Tooltip",
              {
                class: {
                  "ivu-table-cell-tooltip": true
                }
              },
              [
                h(
                  "span",
                  {
                    class: {
                      "ivu-table-cell-tooltip-content": true
                    }
                  },
                  this.formatTime(params.row.outdate, true)
                ),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  this.formatTime(params.row.outdate, true)
                )
              ]
            );
          }
        }
      ],
      dataA: []
    };
  }
};
</script>
<style lang="less" >
@import "./xd-put-in.less";
</style>
